<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>查找和过滤</title>
	<script src="../jquery/jquery-3.3.1.js"></script>
	<script>
	/**
	 * 通常情况下选择器可以直接定位到我们想要的元素，但是，当我们拿到一个jQuery对象后，
	 * 还可以以这个对象为基准，进行查找和过滤。
	 *
	 * 最常见的查找是在某个节点的所有子节点中查找，
	 * 使用find()方法，它本身又接收一个任意的选择器
	 */
	</script>
</head>
<body>
	<ul class="lang">
		<li class="js dy">JavaScript</li>
		<li class="dy">Python</li>
		<li id="swift">Swift</li>
		<li class="dy">Scheme</li>
		<li id="haskell">Haskell</li>
	</ul>
<script>

	//1:查找
	//获取ul
	let ul = $("ul.lang");
	//获取JavaScript,Python,Scheme
	let dy = ul.find(".dy");
	console.log(dy.text());
	//获取Swift
	let swift = ul.find("#swift");
	console.log(swift.text());
	//获取JavaScript
	let javaScript = ul.find("li.js");
	console.log(javaScript.text());

	//上一级的节点,通过 parent
	let parent = ul.parent(".lang");
	console.log(parent.html());

	//获取下一个节点next() 上一个节点 prev()

	//2:过滤 和函数式编程中的map.filter类似
	//filter()方法锅炉调不符合选择器条件的节点
	let langs = $("ul.lang li");
	let a = langs.filter(".dy");
	//或者传入一个函数，要特别注意函数内部的this被绑定为DOM对象，不是jQuery对象：
	langs.filter(function () {
		return this.innerHTML.indexOf('S') === 0; // 返回S开头的节点
	}); //拿到Swift, Scheme

	let arr = langs.map(function () {
		return this.innerHTML;
	}).get();

	for (let ele of arr) {
		console.log(ele);
	}

	console.log(langs.first().text());
	console.log(langs.last().text());
	console.log(langs.slice(2).text())
</script>
</body>
</html>